<template>
  <div class="TextPropertyItem">
    <span class="label">{{ label }}</span>
    <span class="input-group">{{object[prop] || ''}}</span>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import { Input } from 'element-ui'

@Component({
  components: {
    [Input.name]: Input
  }
})
export default class TextPropertyItem extends Vue {
  @Prop({ type: String })
  private label!: string;

  @Prop({ type: Object, required: true })
  private object!: object;

  @Prop({ type: [String, Number], required: false })
  private prop!: string | number;

  @Prop({ type: String, required: true })
  private type!: string;
}
</script>
<style scoped lang="scss">
@import '~@/style/variables.scss';
.TextPropertyItem {
  .input-group {
    line-height: 24px;
  }
}
</style>